import React, { useEffect } from "react";
import ReactECharts from "echarts-for-react";
import axios from "axios";
import Echart1 from "../Components/Echart1";
import Echart2 from "../Components/Echart2";
import List from "../Components/Userlist";
import "../css/Echarts.css";

// 在此组件中绘制一个简单的折线图
const Echart = () => {
  // useEffect(() => {
  //   axios.get("/mock", { dataType: "json" }).then((res) => {
  //     console.log(res.data);
  //   });
  // });
  // 返回折线图的配置对象
  // let option1 = {
  //   tooltip: {
  //     trigger: "axis",
  //     axisPointer: {
  //       type: "cross",
  //       crossStyle: {
  //         color: "#999",
  //       },
  //     },
  //   },
  //   toolbox: {
  //     feature: {
  //       dataView: { show: false, readOnly: false },
  //       magicType: { show: false, type: ["line", "bar"] },
  //       restore: { show: false },
  //       saveAsImage: { show: false },
  //     },
  //   },
  //   legend: {
  //     data: ["团队", "环比", "同比"],
  //     bottom: 10,
  //     itemWidth: 8,
  //     itemHeight: 4,
  //     textStyle: {
  //       color: "#fff",
  //     },
  //   },
  //   xAxis: [
  //     {
  //       type: "category",
  //       axisLine: {
  //         lineStyle: {
  //           color: "#B9B8CE",
  //         },
  //       },
  //       data: [
  //         "1月1日",
  //         "1月2日",
  //         "1月3日",
  //         "1月4日",
  //         "1月5日",
  //         "1月6日",
  //         "1月7日",
  //       ],
  //       axisPointer: {
  //         type: "shadow",
  //       },
  //     },
  //   ],
  //   yAxis: [
  //     {
  //       type: "value",
  //       min: 0,
  //       max: 60,
  //       interval: 10,
  //       name: "",
  //       axisLabel: {
  //         formatter: "{value}",
  //       },
  //       axisLine: {
  //         lineStyle: {
  //           color: "#B9B8CE",
  //         },
  //         show: false, //y轴
  //       },
  //       axisTick: {
  //         show: false, //y轴刻度线
  //       },
  //       splitLine: {
  //         show: false, //网格线
  //       },
  //     },
  //     {
  //       type: "value",
  //       min: 0,
  //       max: 4,
  //       interval: 1,
  //       name: "",
  //       axisLabel: {
  //         formatter: "{value} %",
  //       },
  //       axisLine: {
  //         lineStyle: {
  //           color: "#B9B8CE",
  //         },
  //         show: false,
  //       },
  //       axisTick: {
  //         show: false,
  //       },
  //       splitLine: {
  //         show: false,
  //       },
  //     },
  //   ],
  //   series: [
  //     {
  //       name: "团队",
  //       type: "bar",
  //       tooltip: {
  //         valueFormatter: function (value) {
  //           return value;
  //         },
  //       },
  //       data: [60.0, 51.1, 42.3, 33.4, 25.6, 16, 15.5],
  //     },
  //     {
  //       name: "环比",
  //       type: "line",
  //       yAxisIndex: 1,
  //       tooltip: {
  //         valueFormatter: function (value) {
  //           return value;
  //         },
  //       },
  //       data: [1.5, 0.8, 1.4, 1, 0.4, 0.7, 0.8],
  //     },
  //     {
  //       name: "同比",
  //       type: "line",
  //       yAxisIndex: 1,
  //       tooltip: {
  //         valueFormatter: function (value) {
  //           return value;
  //         },
  //       },
  //       data: [1.3, 0.7, 0.9, 0.8, 2.9, 2, 3.7],
  //     },
  //   ],
  // };
  // 返回饼图的配置对象
  // let option2 = {
  //   title: {
  //     text: null,
  //   },
  //   tooltip: {
  //     trigger: "item",
  //   },
  //   legend: {
  //     orient: "vertical",
  //     x: "right",
  //     y: "center",
  //     icon: "circle",
  //     align: "left",
  //     padding: 30,
  //     textStyle: {
  //       color: "white",
  //       fontSize: "14px",
  //     },
  //   },
  //   labelLine: {
  //     normal: {
  //       show: false, // show设置线是否显示，默认为true，可选值：true ¦ false
  //     },
  //   },
  //   label: {
  //     show: true,
  //     position: "left",
  //   },
  //   series: [
  //     {
  //       name: "Access From",
  //       type: "pie",
  //       radius: ["40%", "70%"],
  //       center: ["40%", "50%"],
  //       data: [
  //         { value: 3000, name: "美国" },
  //         { value: 3465, name: "英国" },
  //         { value: 2027, name: "澳大利亚" },
  //         { value: 1801, name: "印度" },
  //         { value: 1700, name: "泰国" },
  //         { value: 551, name: "越南" },
  //         { value: 123, name: "缅甸" },
  //         { value: 4555, name: "老挝" },
  //         { value: 556, name: "印度尼西亚" },
  //         { value: 1111, name: "新加坡" },
  //       ],
  //       itemStyle: {
  //         normal: {
  //           label: {
  //             textStyle: {
  //               color: "white",
  //               fontSize: 12,
  //               fontWeight: "bolder",
  //             },
  //             formatter: "{b}:{c}",
  //           },
  //           labelLine: {
  //             lineStyle: {
  //               color: "#D8DBE1",
  //             },
  //           },
  //         },
  //       },
  //     },
  //   ],
  // };
  return (
    <div>
      <div className="echartsBox">
        <div className="box1">
          <div className="item">
            <div className="itemTitle">团队趋势分析</div>
            <Echart1 />
          </div>
          <div className="item">
            <div className="itemTitle">团队目的地分析</div>
            <Echart2 />
          </div>
        </div>

        <div className="box2">
          <div className="itemTitle">今日出境团队</div>
          <List />
        </div>
      </div>
    </div>
  );
};

export default Echart;
